<template>
  <div class="notifications" id="notifications">
    <el-container class="notifications__container">
      <el-header class="notifications__header">
        <h1 class="header page">通知中心</h1>
        <el-button
          class="notify-switch"
          icon="el-icon-bell"
          size="mini"
          :title="notifyIconTitle"
          :type="notidyIconType"
          @click="onClickNotifyIcon"
          circle
        />
      </el-header>
      <el-container class="notifications__body">
        <el-aside width="140px" class="notifications__aside">
          <el-menu
            router
            :default-active="$route.path"
            class="notifications__manu">
            <el-menu-item index="/notifications/atme">
              <span slot="title">@我</span>
            </el-menu-item>
            <el-menu-item index="/notifications/event">
              <span slot="title">通知</span>
            </el-menu-item>
            <el-menu-item index="/notifications/user_message">
              <span slot="title">私信</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="notifications__main" v-bar>
          <div>
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import config from '@/config'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      pollingTimer: null
    }
  },
  computed: {
    ...mapState({
      notifyStatus: state => state.notifications.notifyStatus
    }),
    notidyIconType () {
      return this.notifyStatus ? 'primary' : ''
    },
    notifyIconTitle () {
      return this.notifyStatus ? '关闭通知' : '开启通知'
    }
  },
  async created () {
    await this.$store.dispatch('fetchAllFirstPage')
    this.pollingTimer = setInterval(() => {
      this.$store.dispatch('notifyNewNotification')
    }, config.pollingTime)
  },
  methods: {
    onClickNotifyIcon () {
      this.$store.dispatch('toggleNotifyStatus')
    }
  },
  watch: {
    '$route' (to, from) {
      if (from.name !== to.name) {
        this.$store.dispatch('setCurrentTab', to.name)
      }
    }
  }
}
</script>
